import React, { useEffect, useState, useReducer } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import {
  Table,
  Badge,
  Menu,
  Dropdown,
  Space,
  Input,
  Row,
  Col,
  Divider,
  InputNumber,
  Button,
} from "antd";
import {
  DownOutlined,
  MinusCircleOutlined,
  PlusCircleOutlined,
} from "@ant-design/icons";
import CuiModel from "./CuiModel";
import "./index.css";

const initialState = {
  shopModelStatus: false,
  tableValues: [{ accessoryGroups: [{ options: [] }] }],
  updataId: "",
};
const reducer = (state, action) => {
  switch (action.type) {
    case "changeShopModel":
      return {
        ...state,
        shopModelStatus: action.status,
      };
    case "changeID":
      return {
        ...state,
        updataId: action.id,
      };
    case "changeTableValues":
      return {
        ...state,
        tableValues: [...action.tableValues],
      };
    default:
  }
};

function NestedTable(props) {
  const { data } = props;
  let judgeId = "";
  /**
   * 设置选择菜品模态框
   */
  const [store, dispatch] = useReducer(reducer, initialState);

  console.log("模态框选择的数据", store);

  const [adjData, setAdjData] = useState([
    {
      accessories: [],
      id: 100001,
      count: 0,
      productMethodSnapshotOnPlace: {
        id: 10021,
        name: "微辣",
        groupName: "辣度",
      },
      productSnapshotOnPlace: {
        id: 100,
        name: "宫保鸡丁",
        unitPrice: 26.8,
        unitOfMeasure: "元/份",
      },
      quantity: { latest: 1, onPlace: 1, onProduce: 0 },
      seqNo: "1",
      status: "PLACED",
      version: 1,
    },
  ]);
  useEffect(() => {
    data.items.map((item) => {
      item.count = 0;
      item.accessories.map((acc) => {
        acc.count = 0;
      });
    });

    console.log("处理后的值", data);

    setAdjData(data.items);
  }, []);
  useEffect(() => {
    /**执行添加 */

    console.log("执行添加");
    let opts = [];
    store.tableValues.map((item) => {
      item.accessoryGroups.forEach((item) => {
        item.options.forEach((opt) => {
          opts.push({
            productAccessorySnapshotOnPlace: opt,
            quantity: { latest: 1, onPlace: 1, onProduce: 0 },
          });
        });
      });

      let obj = {
        accessories: opts,
        id: item.id,
        count: 0,
        productSnapshotOnPlace: {
          id: item.id,
          name: item.name,
          unitPrice: item.unitPrice,
          unitOfMeasure: item.unitOfMeasure,
        },
        quantity: { latest: 1, onPlace: 1, onProduce: 0 },
        seqNo: parseInt(adjData.slice(-1)[0].seqNo) + 1,
        status: "PLACED",
        version: 1,
        add: true,
      };
      opts = [];
      adjData.push(obj);
    });
    setAdjData([...adjData]);
  }, [store.tableValues]);

  console.log("更改后的值", adjData);

  /**
   * 修改 状态值
   * @param {} props
   * @returns
   */

  return (
    <>
      <Row style={{ width: "100%", marginLeft: 30 }}>
        <Col span={4}>序号</Col>
        <Col span={4}>菜品名</Col>
        <Col span={4}>当前数量</Col>
        <Col span={4}>计量单位</Col>
        <Col span={2}>已制作数量</Col>
        <Col span={4}>调整数量</Col>
        <Col span={2}>调整后数量</Col>
      </Row>
      <Divider />

      {adjData.map((item) => {
        if (item.add) {
          return (
            <>
              <Row style={{ width: "100%", marginLeft: 30 }} key={item.id}>
                <Col span={2}>
                  <div className="divBg">{item.seqNo}</div>
                </Col>
                <Col span={10}>
                  <Row style={{ marginRight: 80 }}>
                    <Col span={16}>
                      <Input
                        style={{ width: "100%" }}
                        value={item.productSnapshotOnPlace.name}
                      />{" "}
                    </Col>
                    <Col span={6}>
                      <Button
                        style={{ width: "100%" }}
                        onClick={() => {
                          dispatch({ type: "changeShopModel", status: true });
                          dispatch({ type: "changeID", id: item.id });
                        }}
                      >
                        选择
                      </Button>
                    </Col>
                  </Row>
                </Col>

                <Col span={4}>{item.productSnapshotOnPlace.unitOfMeasure}</Col>
                <Col span={2}>
                  {item.quantity.latest +
                    item.quantity.onProduce -
                    item.quantity.onPlace}
                </Col>
                <Col span={4}>
                  <MinusCircleOutlined
                    style={{ fontSize: 20 }}
                    onClick={() => {
                      item.count = item.count - 1;
                      setAdjData([...adjData]);
                    }}
                  />
                  <InputNumber
                    value={item.count}
                    onChange={(e) => {
                      item.count = e;
                      setAdjData([...adjData]);
                    }}
                  />

                  <PlusCircleOutlined
                    style={{ fontSize: 20 }}
                    onClick={() => {
                      item.count = item.count + 1;
                      setAdjData([...adjData]);
                    }}
                  />
                </Col>
                <Col span={2}>{item.count + item.quantity.latest}</Col>
              </Row>
              {item.accessories.map((acc) => {
                return (
                  <>
                    <Row style={{ width: "100%", marginLeft: 30 }} key={acc.id}>
                      <Col span={4} push={2}>
                        <div className="divBgSun">{acc.seqNo}</div>
                      </Col>
                      <Col span={4} push={1}>
                        {acc.productAccessorySnapshotOnPlace.name}
                      </Col>
                      <Col span={4}>{acc.quantity.latest}</Col>
                      <Col span={4}>
                        {acc.productAccessorySnapshotOnPlace.unitOfMeasure}
                      </Col>
                      <Col span={2}>
                        {acc.quantity.latest +
                          acc.quantity.onProduce -
                          acc.quantity.onPlace}
                      </Col>
                      <Col span={4}>
                        <MinusCircleOutlined
                          style={{ fontSize: 20 }}
                          onClick={() => {
                            acc.count = acc.count - 1;
                            setAdjData([...adjData]);
                          }}
                        />
                        <InputNumber
                          value={acc.count}
                          onChange={(e) => {
                            acc.count = e;
                            setAdjData([...adjData]);
                          }}
                        />

                        <PlusCircleOutlined
                          style={{ fontSize: 20 }}
                          onClick={() => {
                            acc.count = acc.count + 1;
                            setAdjData([...adjData]);
                          }}
                        />
                      </Col>
                      <Col span={2}>{acc.count + acc.quantity.latest}</Col>
                    </Row>
                  </>
                );
              })}
            </>
          );
        } else {
          return (
            <>
              <Row style={{ width: "100%", marginLeft: 30 }} key={item.id}>
                <Col span={4}>
                  <div className="divBg">{item.seqNo}</div>
                </Col>
                <Col span={4}>{item.productSnapshotOnPlace.name}</Col>
                <Col span={4}>{item.quantity.latest}</Col>
                <Col span={4}>{item.productSnapshotOnPlace.unitOfMeasure}</Col>
                <Col span={2}>
                  {item.quantity.latest +
                    item.quantity.onProduce -
                    item.quantity.onPlace}
                </Col>
                <Col span={4}>
                  <MinusCircleOutlined
                    style={{ fontSize: 20 }}
                    onClick={() => {
                      item.count = item.count - 1;
                      setAdjData([...adjData]);
                    }}
                  />
                  <InputNumber
                    value={item.count}
                    onChange={(e) => {
                      item.count = e;
                      setAdjData([...adjData]);
                    }}
                  />

                  <PlusCircleOutlined
                    style={{ fontSize: 20 }}
                    onClick={() => {
                      item.count = item.count + 1;
                      setAdjData([...adjData]);
                    }}
                  />
                </Col>
                <Col span={2}>{item.count + item.quantity.latest}</Col>
              </Row>
              {item.accessories.map((acc) => {
                return (
                  <>
                    <Row style={{ width: "100%", marginLeft: 30 }} key={acc.id}>
                      <Col span={4} push={2}>
                        <div className="divBgSun">{acc.seqNo}</div>
                      </Col>
                      <Col span={4} push={1}>
                        {acc.productAccessorySnapshotOnPlace.name}
                      </Col>
                      <Col span={4}>{acc.quantity.latest}</Col>
                      <Col span={4}>
                        {acc.productAccessorySnapshotOnPlace.unitOfMeasure}
                      </Col>
                      <Col span={2}>
                        {acc.quantity.latest +
                          acc.quantity.onProduce -
                          acc.quantity.onPlace}
                      </Col>
                      <Col span={4}>
                        <MinusCircleOutlined
                          style={{ fontSize: 20 }}
                          onClick={() => {
                            acc.count = acc.count - 1;
                            setAdjData([...adjData]);
                          }}
                        />
                        <InputNumber
                          value={acc.count}
                          onChange={(e) => {
                            acc.count = e;
                            setAdjData([...adjData]);
                          }}
                        />

                        <PlusCircleOutlined
                          style={{ fontSize: 20 }}
                          onClick={() => {
                            acc.count = acc.count + 1;
                            setAdjData([...adjData]);
                          }}
                        />
                      </Col>
                      <Col span={2}>{acc.count + acc.quantity.latest}</Col>
                    </Row>
                  </>
                );
              })}
            </>
          );
        }
      })}
      <Row style={{ width: "100%" }}>
        <Button
          style={{ width: "100%" }}
          onClick={() => {
            dispatch({ type: "changeShopModel", status: true });
          }}
        >
          添加新菜品
        </Button>
      </Row>
      <CuiModel store={store} dispatch={dispatch} />
    </>
  );
}

export default NestedTable;
